<template>
	<view class="activity-item" @click="actItemClick">
		<view class="imgZero" v-if="actItem.imgPath.length === 0">
			<view class="title">
				<view style="margin-right:10px">{{actItem.actTitle}}</view>
			</view>
			<view class="bottom">
				<view class="organizer">
					{{actItem.organizerName}}
				</view>
				<view class="time">
					{{actItem.startTime}}
				</view>
			</view>
		</view>

		<view class="imgLittle3" v-else-if="actItem.imgPath.length < 3">
			<view class="top">
				<view class="img">
					<u--image class="img-item" :showLoading="true" :src="envURL+actItem.imgPath[0].imgPath" width="90px"
						height="90px" :lazy-load="true"></u--image>
				</view>
				<view class="title">
					<view style="margin-right:10px">{{actItem.actTitle}}</view>
				</view>
			</view>
			<view class="bottom">
				<view class="organizer">
					{{actItem.organizerName}}
				</view>
				<view class="time">
					{{actItem.startTime}}
				</view>
			</view>
		</view>

		<view class="imgBig3" v-else-if="actItem.imgPath.length >= 3">
			<view class="top">
				<view class="title">
					<view style="margin-right:10px">{{actItem.actTitle}}</view>
				</view>
				<view class="img">
					<u--image v-for="(item, index) in actItem.imgPath" class="img-item" :showLoading="true"
						:src="envURL+item.imgPath" width="90px" height="90px" v-if="index<3"></u--image>
				</view>
			</view>
			<view class="bottom">
				<view class="organizer">
					{{actItem.organizerName}}
				</view>
				<view class="time">
					{{actItem.startTime}}
				</view>
			</view>
		</view>
		<login ref="login"></login>
	</view>
</template>

<script>
	import {
		getToken
	} from '@/utils/auth.js'
	import {
		envURL
	} from '@/utils/env.js'
	export default {
		name: 'activity-item',
		props: {
			actItem: {
				style: Object,
				default: () => {}
			}
		},
		data() {
			return {
				envURL: envURL
			}
		},
		methods: {
			actItemClick() {

			},
		}
	}
</script>

<style lang="scss" scoped>
	.activity-item {
		background-color: #fff;
		margin-bottom: 16px;
		border-radius: 8px;
		padding: 10px 10px;

		.title {
			color: #000000;
			padding-bottom: 4px;
		}

		.bottom {
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			color: #b4b4b4;
			margin-top: 10px;
		}

		.imgZero {
			.bottom {
				margin-top: 20px;
			}
		}

		.imgLittle3 {
			.top {
				display: flex;

				.title {
					padding-left: 20px;
				}
			}
		}

		.imgBig3 {
			.top {
				.img {
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}
</style>